export default (dom, data) => {
  const { months, sealTimesArr, touchTimesArr } = data;
  const chart = window.ThsDataVStandardChart.init(dom);
  const option = {
    backgroundColor: '#ffffff',
    grid: [
      {
        top: 60,
        left: 16,
        bottom: 40,
        right: 16,
      },
    ],
    tooltip: {
      hideDelay: 2000,
      dvAutoHide: true,
      show: true,
      backgroundColor: 'rgba(59,59,59,1)',
      borderColor: 'rgba(59,59,59,1)',
      textStyle: {
        color: 'rgba(255, 255, 255, 0.84)',
        fontSize: 12,
        fontFamily: 'THS',
        lineHeight: 16,
      },
      transitionDuration: 0,
      extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0); border-radius: 4px; z-index: 1;padding: 8px',
      trigger: 'axis',
      axisPointer: {
        animation: false,
      },
    },
    xAxis: [
      {
        data: months,
        axisPointer: {
          show: true,
          type: 'line',
          lineStyle: {
            color: 'rgba(133,133,133,1)',
            type: 'solid',
            width: 1,
          },
          label: {
            show: false,
            fontFamily: 'THS',
            fontSize: 10,
            color: '#fff',
            backgroundColor: 'rgba(51,102,255,1)',
          },
          snap: true,
        },
        axisLine: {
          show: false,
          width: 0.5,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.6)',
          fontSize: 10,
          fontFamily: 'THS',
          margin: 6,
          dvAlignEdge: true,
        },
        dvSplit3: true,
      },
    ],
    yAxis: [
      {
        dvSplitLineNumber: 5,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        z: 57,
        axisLabel: {
          show: true,
          inside: true,
          verticalAlign: 'bottom',
          color: 'rgba(0, 0, 0, 0.6)',
          fontSize: 10,
          fontFamily: 'THS',
          margin: 0,
          dvAlignEdge: true,
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 0.5,
            color: 'rgba(0, 0, 0, 0.06)',
          },
        },
      },
    ],
    legend: {
      left: 16,
      icon: 'path://M10,11a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z',
      itemWidth: 6,
      itemHeight: 6,
      padding: [6, 0, 0, 0],
      textStyle: {
        color: 'rgba(0, 0, 0, 0.6)',
        fontSize: 12,
        padding: [0, -2],
      },
    },
    series: [
      {
        type: 'bar',
        // 堆叠
        stack: 'test',
        name: '封死涨停次数',
        data: sealTimesArr,
        barMaxWidth: 16,
        barGap: '50%',
        animation: true,
        emphasis: {
          disabled: true,
        },
        itemStyle: {
          color: '#3366FF',
        },
      },
      {
        type: 'bar',
        // 堆叠
        stack: 'test',
        name: '触及涨停次数',
        stackStrategy: 'positive',
        data: touchTimesArr,
        barGap: '50%',
        animation: true,
        emphasis: {
          disabled: true,
        },
        itemStyle: {
          color: '#52BBFF',
        },
        label: {
          show: true,
          fontSize: 10,
          lineHeight: 18,
          fontWeight: 600,
          formatter: params => {
            const index = params.dataIndex;
            const touchTimeValue = params.value;
            const sealTimeValue = sealTimesArr[index];
            return sealTimeValue || touchTimeValue ? `${sealTimeValue}/${touchTimeValue}` : '';
          },
          position: 'top',
        },
      },
    ],
    axisPointer: {
      dvHideDelay: 2000,
      dvAutoHide: true,
      dvShowOnlyWhenRenderingContent: true,
      dvShowOutOfGrid: true,
      dvHideWhenClickInGrid: false,
    },
  };
  chart.play({
    option,
  });
};
